import React from 'react';
import { Card, Spin, Empty } from 'antd';
import moment from 'moment';

const VenueTimeline = ({ venues, loading }) => {
    const now = moment();
    const startHour = now.hour();
    if (loading) {
        return <Spin />;
    }

    if (!venues || venues.length === 0) {
        return <Empty description="暂无场地数据" />;
    }

        const hours = Array.from({ length: 24 }, (_, i) => now.clone().add(i, 'hours'));

    return (
        <Card>
            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
                <div style={{ width: '150px', fontWeight: 'bold' }}>场地</div>
                <div style={{ flex: 1, display: 'flex' }}>
                    {hours.map(hour => (
                        <div key={hour.format('HH')} style={{ width: '40px', textAlign: 'center', borderLeft: '1px solid #f0f0f0' }}>
                            {hour.format('HH')}
                        </div>
                    ))}
                </div>
            </div>
            {venues.map(venue => (
                <div key={venue.id} style={{ display: 'flex', alignItems: 'center', borderBottom: '1px solid #f0f0f0', padding: '16px 0', position: 'relative' }}>
                    <div style={{ width: '150px', fontWeight: 'bold' }}>{venue.name}</div>
                    <div style={{ flex: 1, position: 'relative', height: '40px', background: 'linear-gradient(90deg, #f5f5f5 0%, #e9ecef 100%)', borderRadius: '8px', boxShadow: '0 2px 8px rgba(0,0,0,0.03)' }}>
                        {/* 美化时间线，已预约信息显示在时间线上方 */}
                        {venue.orders && venue.orders.map(order => {
                            const orderStart = moment.unix(order.start_time);
                            const orderEnd = moment.unix(order.end_time);

                            // 计算时间轴起点和终点
                            const timelineStart = now.clone();
                            const timelineEnd = now.clone().add(24, 'hours');

                            // 计算显示区间的实际开始和结束
                            const displayStart = moment.max(orderStart, timelineStart);
                            const displayEnd = moment.min(orderEnd, timelineEnd);

                            // 计算时间轴的总分钟数
                            const totalMinutesInTimeline = 24 * 60;

                            // 计算相对于时间轴起点的偏移量（百分比）
                            const leftOffsetMinutes = displayStart.diff(timelineStart, 'minutes');
                            const left = (leftOffsetMinutes / totalMinutesInTimeline) * 100;

                            // 计算显示区间的宽度（百分比）
                            const durationMinutes = displayEnd.diff(displayStart, 'minutes');
                            const width = (durationMinutes / totalMinutesInTimeline) * 100;

                            // 只有在时间轴范围内的订单才显示
                            if (orderEnd.isBefore(timelineStart) || orderStart.isAfter(timelineEnd)) {
                                return null;
                            }

                            // 判断是否为当前进行中的订单
                            const isOngoing = now.isBetween(orderStart, orderEnd);

                            return (
                                <React.Fragment key={order.id}>
                                    {/* 文本显示在时间线上方 */}
                                    <div style={{
                                        position: 'absolute',
                                        left: `${left}%`,
                                        width: `${width}%`,
                                        top: '-20px', // 将文字置于时间条上方
                                        textAlign: 'center',
                                        zIndex: 15,
                                        fontSize: '12px',
                                        color: isOngoing ? '#3b82f6' : '#e53e3e',
                                        fontWeight: 'bold',
                                        textShadow: '0 1px 2px rgba(255,255,255,0.7)',
                                    }}>
                                        {orderEnd.format('HH:mm')} {'结束'}
                                    </div>
                                    {/* 已预约的时间条 */}
                                    <div style={{
                                        position: 'absolute',
                                        left: `${left}%`,
                                        width: `${width}%`,
                                        height: '30px',
                                        // 所有已预约都显示红色
                                        background: 'linear-gradient(90deg, #ff8787 0%, #ff6b6b 100%)',
                                        borderRadius: '6px',
                                        top: '5px',
                                        zIndex: 5,
                                        boxShadow: isOngoing ? '0 0 10px rgba(59, 130, 246, 0.7)' : '0 2px 4px rgba(0,0,0,0.1)',
                                        border: isOngoing ? '2px solidrgb(61, 196, 70)' : '1.5px solid #ff8787',
                                        transition: 'all 0.3s ease',
                                    }}>
                                    </div>
                                </React.Fragment>
                            );
                        })}
                    </div>
                </div>
            ))}
        </Card>
    );
};

export default VenueTimeline;